<template>
  <el-dialog class="sellDialog" :visible.sync="visible" title="订单详情" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form size="small" ref="dataForm" label-width="120px">
      <el-form-item v-for="item in headerList" :key="item.key" :label="item.label">{{dataForm[item.key]}}</el-form-item>
      <el-form-item label="客户图片">
        <img v-if="dataForm.orderPicture" :src="dataForm.orderPicture" class="avatar">
      </el-form-item>
      <el-form-item label="订单图片">
        <img v-if="dataForm.designerPicture" :src="dataForm.designerPicture" class="avatar">
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {},
      headerList: [{
        key: 'orderSn',
        label: '订单编号',
        width: '150'
      },
      {
        key: 'clothingTypeName',
        label: '服装类型',
        width: '150'
      },
      {
        key: 'bust',
        label: '胸围',
        width: '150'
      },
      {
        key: 'waist',
        label: '腰围',
        width: '150'
      },
      {
        key: 'hipline',
        label: '臂围',
        width: '150'
      },
      {
        key: 'height',
        label: '身高',
        width: '150'
      },
      {
        key: 'designerName',
        label: '设计师',
        width: '150'
      },
      {
        key: 'statusName',
        label: '订单状态',
        width: '150'
      },
      {
        key: 'orderDescribe',
        label: '订单描述',
        width: '150'
      },
      {
        key: 'customerAmount',
        label: '价格(元)',
        width: '150'
      }]
    }
  },
  methods: {
    // 显示弹窗
    init (row) {
      this.visible = true
      this.dataForm = row
    }
  }
}
</script>
<style lang="scss">
.sellDialog{
  .el-dialog__header{
    .el-dialog__title{
      font-size: 14px;
      font-weight: bold;
    }
    border-bottom: 1px solid #f2f2f2;
  }
  .el-dialog__body{
    padding: 15px 20px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
